<!--
* @Description: 定时任务 - 表单
* @Author: DSY
* @Date: 2022-03-19 22:45:22
 * @LastEditors: dhlleo dhlleo@126.com
 * @LastEditTime: 2022-11-30 10:24:41
-->
<template>
  <tw-dialog
    v-model="visible"
    :title="title"
    :loading="loading"
    width="800px"
    height="300px"
    @close="handleClose"
  >
    <el-form ref="dbFormRef" :model="dbForm" :rules="rules" label-width="90px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="任务编码" prop="code">
            <el-input v-model="dbForm.code" clearable placeholder="请输入任务编码"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="任务名称" prop="name">
            <el-input v-model="dbForm.name" clearable placeholder="请输入任务名称"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="任务分组" prop="groupName">
            <el-input v-model="dbForm.groupName" clearable placeholder="请输入任务分组"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态" prop="status">
            <el-select v-model="dbForm.status" clearable placeholder="请选择状态">
              <tw-dic dicKey="TWB_QUARTZ_JOB_STATUS"></tw-dic>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="调用方法" prop="invokeTarget">
            <el-input
              v-model="dbForm.invokeTarget"
              clearable
              placeholder="请输入调用目标字符串"
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="16">
          <el-form-item label="计划策略" prop="misfirePolicy">
            <el-radio-group v-model="dbForm.misfirePolicy" size="small">
              <el-radio-button label="0">默认</el-radio-button>
              <el-radio-button label="1">立即执行</el-radio-button>
              <el-radio-button label="2">执行一次</el-radio-button>
              <el-radio-button label="3">忽略</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="并发执行" prop="concurrent">
            <el-radio-group v-model="dbForm.concurrent" size="small">
              <el-radio-button label="1">允许</el-radio-button>
              <el-radio-button label="2">禁止</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="表达式" prop="cronExpression">
            <el-input v-model="dbForm.cronExpression" clearable placeholder="请输入表达式">
              <template #append>
                <el-button @click="handleCronOpen">
                  <svg-icon iconClass="function"></svg-icon>
                </el-button>
              </template>
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="dbForm.remark" clearable placeholder="请输入备注"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <template #footer>
      <el-button @click="handleReset(true)">取 消</el-button>
      <el-button v-if="action === 'add'" type="warning" @click="handleSubmit(true)">
        提交并继续
      </el-button>
      <el-button v-if="action !== 'view'" type="primary" @click="handleSubmit(false)">
        提 交
      </el-button>
    </template>
  </tw-dialog>

  <tw-dialog
    v-model="cron.visible"
    title="表达式"
    width="943px"
    height="645px"
    @close="handleCronClose"
  >
    <cron v-model="cron.cronExpression"></cron>

    <template #footer>
      <el-button @click="cron.visible = false">取 消</el-button>

      <el-button type="primary" @click="handleCronSubmit()"> 确 定 </el-button>
    </template>
  </tw-dialog>
</template>

<script src="./useForm.ts"></script>

<style scoped lang="scss">
  .tw-cron-wrapper {
    margin-top: 10px;
  }
</style>
